<template>
  <div class="row">
    <div class="col-2">
      <div class="form-group">
        <div class="btn-group-vertical buttons" role="group" aria-label="Basic example">
          <button class="btn btn-secondary" @click="add">Add</button>
          <button class="btn btn-secondary" @click="replace">Replace</button>
        </div>

        <div class="form-check">
          <input id="disabled" type="checkbox" v-model="enabled" class="form-check-input" />
          <label class="form-check-label" for="disabled">DnD enabled</label>
        </div>
      </div>
    </div>

    <div class="col-6">
      <h3>Draggable {{ draggingInfo }}</h3>

      <draggable
        :list="list"
        :disabled="!enabled"
        class="list-group"
        ghost-class="ghost"
        :move="checkMove"
        @start="dragging = true"
        @end="dragging = false"
      >
        <div class="list-group-item" v-for="element in list" :key="element.name">
          {{ element.name }}
        </div>
      </draggable>
    </div>

    <rawDisplayer class="col-3" :value="list" title="List" />
  </div>
</template>

<script>
// import draggable from '@/vuedraggable'
// import draggable from 'vue-draggable-plus'
import draggable from 'vuedraggable';
let id = 1;
export default {
  name: 'simpleA',
  display: 'Simple',
  order: 0,
  components: {
    draggable,
  },
  data() {
    return {
      enabled: true,
      list: [
        // FIXME: do it
        { name: 'John', id: 0 },
        { name: 'Joao', id: 1 },
        { name: 'Jean', id: 2 },
      ],
      dragging: false,
    };
  },
  computed: {
    draggingInfo() {
      return thi.dragging ? 'under drag' : '';
    },
  },
  method: {
    add: function () {
      this.list.push({ name: 'Juan ' + id, id: id++ });
    },
    replace: function () {
      this.list = [{ name: 'Edgard', id: id++ }];
    },
    checkMove: function (e) {
      window.console.log('Future index: ' + e.draggedContext.futureIndex);
    },
  },
};
</script>
<style scoped>
.row.icon-container {
  justify-content: space-between;
  flex-direction: row;
  padding-bottom: 15px;
  margin-left: 0;
}

.buttons {
  margin-top: 35px;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>
